<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
<s:web pageName="car_price">
<jsp:attribute name="headPart">
	<style>
		.imgCtn > img{
			width: 269px;
			height: 180px;
		}
		.average{
			margin: 20px 0 0 20px;
		}
		.average > h3{
			color: red;
			margin-bottom: 40px;
		}
		
		.avg-lbl{
			padding-right: 20px;
		}
		
		.avg1, .avg2, .avg3{
			border-radius: 6px;
			color: red;
			margin: 2px 0;
			padding: 9px;
    		font-size: 20px;
    		width: 300px;
		}
		
		.avg1{
			background-color: #ddd;
		}
		.avg2{
			background-color: #aaa;
		}
		.avg3{
			background-color: #FB9D9D;
		}
		
		.change-mileage{
			padding: 0 20px;
			margin-top: 50px;
			width: 269px;
			float:left;
			background-color: #eee;
			border-radius: 3px;
		}
		.change-mileage h4{
			margin: 20px 0;
		}
		
		.cal-btn{
			text-align: center;
   			margin: 20px;
		}
		
		.params{
			color: #170137;
			margin: 20px 0 0 20px;
			background-color: #eee;
			border-radius: 6px;
		    padding: 8px;
		    height: 250px;
		}
		
		.params table{
			display: inline-table;
		}
		
		.params table td{
			padding: 5px;
			color: #170137;
		}
		
		.query-btn{
			padding-top: 50px;
		    text-align: center;
		    display: inline-block;
		    float: right;
		    width: 50%;
		}
	</style>
</jsp:attribute>
<jsp:body>
<div class="row main" style="padding-bottom: 20px;">

	<div style="float: left">
		<div class="imgCtn">
			<img src="<c:url value="/img/serve/${img}"/>">
		</div>
		
		<div class="change-mileage">
			<form method="POST" action="pr">
				<h4>更换里程数</h4>
				<div class="form-group">
					<label class="control-label">里程数(公里)</label>
					<div>
						<input id="mileage" name="mileage" class="form-control">
					</div>
				</div>
				<div class="cal-btn">
						<input type="hidden" name="build" value="${_build}">
						<input type="hidden" name="area" value="${_area}">
						<input type="hidden" name="volume" value="${volume}">
			    		<button type="submit" class="btn default">
			    			重新计算
			    		</button>
		    	</div>
    		</form>
		</div>
	</div>
	<div style="float: left; margin-left: 20px; width: 450px;">
		<div class="average">
			<h3>${brand}&nbsp;${model}</h3>
			<div>
			  	<div class="avg1">
				    <span class="avg-lbl">全国平均价</span>
				    <span class="avg-val">￥<fmt:formatNumber value="${average/10000}" pattern="0.0"/> 万</span>
			  	</div>
			  	<div class="avg2">
				    <span class="avg-lbl">全省平均价</span>
				    <span class="avg-val">￥<fmt:formatNumber value="${averageByProvince/10000}" pattern="0.0"/>万</span>
			  	</div>
			  	<div class="avg3">
				    <span class="avg-lbl">全市平均价</span>
				    <span class="avg-val">￥<fmt:formatNumber value="${averageByCity/10000}" pattern="0.0"/>万</span>
			  	</div>
			</div>
		</div>
		
		<div class="params">
			<h4>查询条件</h4>
			<table style="width: 50%">
				<tr>
					<td>品牌</td>
					<td>${brand}</td>
				</tr>
				<tr>
					<td>型号</td>
					<td>${model}</td>
				</tr>
				<tr>
					<td>制造年份</td>
					<td>${build}</td>
				</tr>
				<tr>
					<td>城市</td>
					<td>${area}</td>
				</tr>
				<c:if test="${not empty volume}">
					<tr>
						<td>排气量</td>
						<td>${volume}L</td>
					</tr>
				</c:if>
				<c:if test="${not empty mileage}">
					<tr>
						<td>里程数</td>
						<td>${mileage}公里</td>
					</tr>
				</c:if>
			</table>
			<div class="query-btn">
	    		<a href="<c:url value="/p"/>" class="btn btn-danger btn-lg">
	    			新的查询
	    		</a>
	    	</div>
		</div>
	</div>
</div>
</jsp:body>
</s:web>
